<!-- 输入框封装 -->
<template>
  <div class="input_list_container">
    <el-dialog :title="dialogTitle" :visible="showDialog" @close="closeMethod" :close-on-click-modal="false"
      :close-on-press-escape="false" width="60%" center>
      <el-form ref="eleFroms" inline :model="allForms" :label-width="eleFromWidth">
        <template v-for="(item, index) in inputForms">
          <el-form-item :key="index" :label="item?.label" :prop="item.value" :rules="[{
            required: true, message: item.type == 'time' ? '请选择' + item.label : item.type == 'timedate' ? '请选择' + item.label : item.type == 'select' ? '请选择' + item.label : '请输入' + item.label, trigger: ['blur', 'change']
          },
          { pattern: specialRules, message: '禁止输入特殊符号', trigger: ['blur', 'change'] }]">
            <!-- 纯文本输入框：姓名、性别、特征 -->
            <el-input v-if="item.type == 'text'" v-model.trim="allForms[item.value]" maxlength="20"></el-input>
            <!-- 纯数字：身份证号、手机号、年龄 -->
            <el-input v-if="item.type == 'number'" type="number" v-model.trim="allForms[item.value]"
              maxlength="20"></el-input>
            <!-- 纯文本下拉框选择框 -->
            <el-select v-if="item.type == 'select'" v-model.trim="allForms[item.value]" :placeholder="'请选择' + item.label">
              <el-option v-for="(   e, i   ) in    item.seleclist   " :key="i" :label="e.label"
                :value="e.value"></el-option>
            </el-select>
            <!-- 纯日期选择格式 -->
            <el-date-picker v-if="item.type == 'time'" v-model.trim="allForms[item.value]" maxlength="20"
              value-format="yyyy-MM-dd"></el-date-picker>
            <!-- 纯日期时间选择格式 -->
            <el-date-picker v-if="item.type == 'timedate'" class="input_timedate" v-model="allForms[item.value]"
              type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </template>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeMethod">关 闭</el-button>
        <el-button v-if="view === false" size="small" type="primary" @click="confirmMethod">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'InputList',
  props: {
    // 表单参数
    inputForms: {
      type: Array,
      default: () => []
    },
    // 弹框标题
    dialogTitle: {
      type: String,
      default: '表单组件封装'
    },
    // 弹框开关
    showDialog: {
      type: Boolean,
      default: false
    },
    // 判断查看还是编辑
    view: {
      type: Boolean,
      default: false
    },
    // 编辑确定方法
    editConfirm: {
      type: Function,
      default: function () { }
    },
    // 新增确定方法
    inserConfirm: {
      type: Function,
      default: function () { }
    }
  },
  data () {
    return {
      // 传参表单
      allForms: {},
      // 表单每行的标题宽度
      eleFromWidth: '100px',
      // eslint-disable-next-line no-useless-escape
      specialRules: /^[^!@&*()（）！!+*//_=%#·\[\]{};'"\\|“”‘’、：——"，.</?~`]+$/
    }
  },
  methods: {
    // 关闭表单弹框
    closeMethod () {
      this.$parent.showDialog = false
      this.$refs.eleFroms.resetFields()
      this.allForms = {}
    },
    // 新增/编辑：确定
    confirmMethod () {
      this.$refs.eleFroms.validate((valid) => {
        if (valid) {
          // 根据表单中是否存在id来判断是新增还是编辑
          if (this.allForms.id) { // 编辑
            this.editConfirm()
          } else { // 新增
            this.inserConfirm()
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
/**
// 纯数字输入框去掉上下按钮
*/
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

::v-deep input[type='number'] {
  --moz-appearance: textfield !important;
}

// 统一更改输入框选择框的大小
/deep/ .el-input__inner {
  width: 240px;
}

// 去除日期选择两边的外边距
/deep/.el-date-editor.el-input,
/deep/ .el-date-editor.el-input__inner {
  width: 240px;
}

/**
控制日期时间的输入框的大小
*/
.input_timedate {
  width: 390px !important;
}
</style>
